Skip to content

Allow disabling auto focusing the first input of newly added row with <SimpleFormIterator disableAutoFocus>#11101

Merged
slax57 merged 5 commits intomarmelab:nextfrom
AarishMansur:fix/simpleformiterator-disable-autofocus
Jan 6, 2026
Merged

Allow disabling auto focusing the first input of newly added row with <SimpleFormIterator disableAutoFocus>#11101
slax57 merged 5 commits intomarmelab:nextfrom
AarishMansur:fix/simpleformiterator-disable-autofocus

Conversation

@AarishMansur
Copy link
Copy Markdown
Contributor

@AarishMansur AarishMansur commented Dec 31, 2025

Problem

SimpleFormIterator always focuses the first input of a newly added item because it relies on react-hook-form’s useFieldArray.append, which auto-focuses by default.

This happens even when inputs explicitly do not request focus, making it impossible to opt out of this behavior (e.g. when adding multiple rows quickly or when focus management is handled elsewhere).

Solution

This PR introduces a new optional prop: disableAutoFocus on SimpleFormIterator.

When enabled, the iterator passes { shouldFocus: false } to react-hook-form’s append method, preventing automatic focus on newly added items.

Default behavior remains unchanged.

The change is fully opt-in.

Focus control is handled at the iterator level, which is the correct abstraction for this behavior.

How To Test

Run Storybook:

npx storybook dev

Open the SimpleFormIterator stories

Open the story demonstrating disableAutoFocus

Click Add

  • A new item is added without any input receiving focus

Compare with the default story

  • Default autofocus behavior is preserved

Focus behavior can be verified visually or by inspecting document.activeElement in browser dev tools.

Additional Checks

  • The PR targets next for a feature
  • The PR includes unit tests (focus behavior is difficult to reliably assert in jsdom; behavior was verified via Storybook)
  • The PR includes one or several stories
  • The documentation is up to date (no documentation changes required)
    Also, please make sure to read the contributing guidelines.

@slax57 slax57 self-requested a review January 5, 2026 09:40
Copy link
Copy Markdown
Contributor

@slax57 slax57 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are a couple additional changes required to complete this PR, but this is a welcome contribution. Thanks!

Comment thread packages/ra-core/src/controller/input/SimpleFormIteratorBase.stories.tsx Outdated
Comment thread packages/ra-core/src/controller/input/SimpleFormIteratorBase.stories.tsx Outdated
Comment thread packages/ra-core/src/controller/input/SimpleFormIteratorBase.tsx
@slax57 slax57 changed the title fix(SimpleFormIterator): add disableAutoFocus option when adding items Allow disabling auto focusing the first input of newly added row with <SimpleFormIterator disableAutoFocus> Jan 6, 2026
Copy link
Copy Markdown
Contributor

@slax57 slax57 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@slax57 slax57 added this to the 5.14.0 milestone Jan 6, 2026
@slax57 slax57 merged commit 8054cc7 into marmelab:next Jan 6, 2026
12 of 14 checks passed
@AarishMansur AarishMansur deleted the fix/simpleformiterator-disable-autofocus branch January 6, 2026 08:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants